<template>
	<div>
		<p>son</p>
		<!-- 
			相当于：
			<Grandson：	:msg="msg"
			:msg2="msg2"
			:msg3="msg3"
			@msgChange="msgChange" />
		 -->
		<Grandson v-bind="$attrs" v-on="$listeners" />
	</div>
</template>
<script>
import Grandson from "./grandson.vue";
export default {
	name: "",
	components: { Grandson },
	data() {
		return {};
	},
	props: ["msg"],
	mounted() {
		console.log("$props.msg", this.$props.msg);
		//当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问。

		console.log("$el", this.$el);
		//Vue 实例使用的根 DOM 元素,真实DOM

		console.log("$options", this.$options);
		//用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处：

		console.log("$parent", this.$parent); //父实例，如果当前实例有的话。
		this.$parent.msgChange();

		console.log("root", this.$root);
		//当前组件树的根 Vue 实例。并不是App,是指main.js中的new Vue實例

		console.log("$attrs", this.$attrs);
		// 接收的是除了props已经接收之外的数据
		console.log("收集传递下来绑定的事件", this.$listeners);
		// 父组件传递下来的事件
	},
	methods: {},
};
</script>
<style lang="" scoped></style>
